<template>
    <!-- 新增帳戶表單 -->
    <form @submit.prevent="onSubmit" class="space-y-6">
        <div class="flex space-x-4">
            <!-- 帳戶名稱 -->
            <div class="flex-1">
                <label for="name" class="block text-sm font-medium text-gray-700">Account name</label>
                <input 
                    v-model="account.name" type="text" id="name" required
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md"
                />
            </div>

            <!-- 幣別選單 -->
            <div class="w-40">
                <label for="currency" class="block text-sm font-medium text-gray-700">Currency</label>
                <select
                    v-model="account.currency" id="currency" required
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md"
                >
                    <option value="TWD">TWD</option>
                    <option value="USD">USD</option>
                    <option value="JPY">JPY</option>
                </select>
            </div>

            <!-- 金額輸入 -->
            <div>
                <label for="balance" class="block text-sm font-medium text-gray-700">Balance</label>
                <input 
                    v-model.number="account.balance" type="number" step="0.01" id="balance" required
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md"
                />
            </div>
        </div>

        <!-- 錯誤消息顯示區域 -->
        <div v-if="errorMessage" class="mt-4 text-red-500">{{ errorMessage }}</div>
    
        <div class="flex justify-between">
            <!-- 新增帳戶 -->
            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
            Add Account
            </button>
            
            <!-- 返回帳戶列表 -->
            <button @click="$router.push('/account')" type="button" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600">
            Back to Account List
            </button>
        </div>
    </form>
</template>

<script>
import { createAccount } from '@/api/account'
import errorService from '@/service/errorService';
  
export default {
    data() {
        return {
            account: {
                name: '',
                currency: 'TWD',
                balance: null
            },
            errorMessage: ''
        }
    },
    methods: {
        // 新增帳戶
        async onSubmit() {
            try {
                // 新增成功
                await createAccount(this.account)
                alert('Account added successfully!')
                this.errorMessage = ''
                this.$emit('success')
            } catch (error) {
                this.errorMessage = errorService.handleError(error) || 'Add account failed.'
            }
        }
    }
}
</script>